<template>
  <div class="app-container booknav">
    <span v-if="$route.path == '/periodical/info'||$route.path == '/periodical/list'" class="router-title">当前位置：<router-link to="/">首页</router-link> > <router-link to="/periodical">期刊</router-link> > <span class="title">{{$route.query.value}}</span></span>
    <ul v-else>
      <li><router-link to="/periodical/all">全部</router-link></li>
      <li v-for="(item,index) in list" :key="index">
        <router-link :to="item.path">{{item.name}}</router-link>
      </li>
    </ul>
  </div>
</template>

<script>
  import {GetPeriodicalList} from "../api/Api";

  export default {
  data() {
    return {
      list: []
    };
  },
  created(){
    GetPeriodicalList(5)
      .then(result=>{
        this.list = result.data.map((value,index) => {
          return {
            name:value.type_name,
            path:"/periodical/type/"+index+"?type_name="+value.type_name
          }
        })
      })
  },
  components: {}
};
</script>
<style lang="less" scoped>
.custom-dz{
  .booknav ul li .is-active{
    color: #e93926;
  }
}
.booknav {
  overflow: hidden;
  padding: 30px 0;
  .router-title{
    font-size: 15px;
  }
  ul {
    float: left;
    padding-left: 0px;
    li {
      float: left;
      margin-right: 56px;
      user-select: none;
      padding:10px 0;
      a {
        text-decoration: none;
        font-size: 20px;
        display: block;
        color: #000;
      }
      .is-active {
        color: #15c798;
      }
    }
    li:nth-child(1) {
      a {
        padding-left: 0px;
      }
    }
  }
}
</style>


